﻿@page "/component/nav/navmenu"

<Pager DataSource="@(new List<string>(new[]{
                         "示例","支持分组","垂直显示","仅显示图标","图文兼容","自定义菜单导航的前后内容","尺寸","子菜单","参数"
                     }))">
    <Body>
        <Header1 Divider>
            Dynamic Nav
            <SubHeader>
                Configure from the service for nav content
            </SubHeader>
        </Header1>
        <Segment>
            <Header2>Configure from <code>IServiceCollection</code></Header2>
            <List Ordered Suffixed>
                <Item>
                    @Code.GetCode(@"
```csharp
services.AddNavigation(nav=>{
    nav.Add(new Navigation
    {
        Name = ""XXX"",
        Navigations = new List<Navigation>
        {
            new Navigation
            {
                Name = ""YYY""
            },
            //...
        }
    })
});
```
")
                </Item>
                <Item>
                    Use <code>NavMenu</code> component to render the navigator
                </Item>
            </List>
        </Segment>
        <PresentationPart Title="Demo">
            <RunTemplate>
                <NavMenu />
                <NavMenu BackgroundColor="Color.Blue" />
                <NavMenu BackgroundColor="Color.Red" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<NavMenu />
<NavMenu BackgroundColor=""Color.Blue"" />
<NavMenu BackgroundColor=""Color.Red"" />
```
```csharp
services.AddNavigation(nav =>
{
    nav.Add(new Navigation
    {
        Name = ""Home"",
        Link = ""/"",
        IconClass = ""home""
    });

    nav.Add(new Navigation
    {
        Name = ""News"",
        Navigations = new List<Navigation> {
            new Navigation
            {
                    Name=""Internal""
            },
            new Navigation
            {
                Name=""International""
            },
            new Navigation
            {
                Name=""Entertainment"",
                Navigations=new List<Navigation>
                {
                    new Navigation
                    {
                            Name=""Local""
                    },
                    new Navigation
                    {
                        Name=""HK""
                    },
                }
            }
        }
    });
});
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Key">
    <Description>
        Specify key to render different navigator by configuration
    </Description>
    <RunTemplate>
        <NavMenu BackgroundColor="Color.Pink" Key="Sports" />
        <NavMenu BackgroundColor="Color.Blue" Key="Game" />
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<NavMenu BackgroundColor=""Color.Pink"" Key=""Sports"" />
<NavMenu BackgroundColor=""Color.Blue"" Key=""Game"" />
```
```csharp
services.AddNavigation(""Game"", nav =>
    {
        nav.Add(new Navigation
        {
            Name = ""Games"",
            IconClass = ""game"",
            Navigations = new List<Navigation> {
            new Navigation
            {
                    Name=""Internet""
            },
            new Navigation
            {
                Name=""Mobile""
            },
            }
        });
        nav.Add(new Navigation
        {
            Name = ""Cooperator"",
            IconClass = ""users""
        });
    });

services.AddNavigation(""Sports"", nav =>
{
    nav.Add(new Navigation
    {
        Name = ""NBA""
    });
    nav.Add(new Navigation
    {
        Name = ""WNBA""
    });
    nav.Add(new Navigation
    {
        Name = ""FIBA""
    });
});
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Vertical">
    <RunTemplate>
        <NavMenu Vertical/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<NavMenu Vertical/>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="IconOnly">
            <RunTemplate>
                <NavMenu IconOnly />
                <NavMenu IconOnly Vertical />
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<NavMenu IconOnly />
<NavMenu IconOnly Vertical />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="LabeledIcon">
    <RunTemplate>
        <NavMenu LabeledIcon />
        <NavMenu LabeledIcon Vertical />
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<NavMenu LabeledIcon />
<NavMenu LabeledIcon Vertical />
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Size">
    <RunTemplate>
        <NavMenu Size="Size.Mini" />
        <NavMenu Size="Size.Huge" />
        <NavMenu Size="Size.Mini" Vertical />
        <NavMenu Size="Size.Huge"  Vertical/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<NavMenu Size=""Size.Mini"" />
<NavMenu Size=""Size.Huge"" />
<NavMenu Size=""Size.Mini"" Vertical />
<NavMenu Size=""Size.Huge""  Vertical/>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Start/End custom content">
    <Description>
        Set <code>StartContent</code> before nav item rendered
        <br />
        Set <code>EndContent</code> after nav item rendered
    </Description>
    <RunTemplate>
        <NavMenu BackgroundColor="Color.Green">
            <StartContent>
                <Item>
                    <Icon IconClass="google" /> Logo
                </Item>
            </StartContent>
            <EndContent>
                    <Menu UI="false" HorizontalPosition="HorizontalPosition.Right" Borderless Linked>
                        <Item>Login</Item>
                        <Item>Register</Item>
                    </Menu>
            </EndContent>
        </NavMenu>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<NavMenu BackgroundColor=""Color.Green"">
    <StartContent>
        <Item>
            <Icon IconClass=""google"" /> Logo
        </Item>
    </StartContent>
    <EndContent>
            <Menu UI=""false"" HorizontalPosition=""HorizontalPosition.Right"" Borderless Linked>
                <Item>Login</Item>
                <Item>Register</Item>
            </Menu>
    </EndContent>
</NavMenu>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Sub Menu">
    <RunTemplate>
        <Menu>
            <DropDownItem>
                Sub Menu
                <Icon IconClass="dropdown" />
                <NavMenu Key="Game" />
            </DropDownItem>
        </Menu>
        <Menu Vertical>
            <DropDownItem>
                Sub Menu
                <Icon IconClass="dropdown" />
                <NavMenu Key="Game"  />
            </DropDownItem>
        </Menu>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Menu>
    <DropDownItem>
        Sub Menu
        <Icon IconClass=""dropdown"" />
        <NavMenu Key=""Game"" />
    </DropDownItem>
</Menu>
<Menu Vertical>
    <DropDownItem>
        Sub Menu
        <Icon IconClass=""dropdown"" />
        <NavMenu Key=""Game""  />
    </DropDownItem>
</Menu>
```
")
    </CodeTemplate>
</PresentationPart>
    </Body>
</Pager>